<template>
  <div>{{ count }}</div>
  <button @click="add">点击</button>
  <div>{{x}} | {{y}}</div>
  <!--  <div>{{state.count}}</div>-->
  <!--  <img alt="Vue logo" src="./assets/logo.png" />-->
  <HelloWorld msg="Hello Vue 3.0 + Vite"/>
</template>


<script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive, toRefs, ref, watchEffect, watch, onMounted, onUpdated, onUnmounted} from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  // 不具备数据响应式
  setup() {
    // const state = reactive({
    //   count: 0
    // })
    // setInterval(() => {
    //   state.count++
    // }, 1000)
    // return {state}

    // const count = ref(0)
    // setInterval(() => {
    //   count.value++
    // }, 1000)
    //
    // return {count}

    // const state = reactive({
    //   count: 0
    // })
    // setInterval(() => {
    //   count.value++
    // }, 1000)
    // const {count} = toRefs(state)  // 把普通数据转换为响应式数据
    // const {count} = toRef(state, 'count') // 指定转出的数据
    // return {
    //   count
    // }


    // const state = reactive({
    //   count: 0
    // })
    //
    // setInterval(() => {
    //   state.count++
    // }, 1000)
    //
    // return toRefs(state)

    // const count = ref(0)
    // const add = () => {
    //   count.value++
    //   if (count.value === 5) {
    //     stop()
    //   }
    // }
    // const stop = watchEffect(async (cancel) => {  // 返回停止的方法
    //   // console.log(count.value); // 数据变化会触发
    //
    //   await new Promise(function (resolve, reject) {
    //     console.log(count.value, 'promise')
    //     resolve()
    //   })
    //   // 异步之前进行触发
    //   cancel(() => {
    //     console.log('cancel');
    //   })
    // })
    // return {
    //   count,
    //   add
    // }

    const count = ref(0)
    const add = () => {
      count.value++;
    }
    // 这些新的生命周期勾子函数必须在setup函数中使用
    // useMounted();
    const {x, y} = useMousePosition();

    return {
      count,
      add,
      x,
      y
    }
    function useMounted() {
      onMounted( ()=> {
        console.log('mounted');
      })
      onUpdated(() => {
        console.log('updated');
      })
      onUnmounted(() => {
        console.log('unmounted');
      })
    }

    function useMousePosition () {
      const x = ref(0)
      const y = ref(0)
      function update(e) {
        x.value = e.pageX
        y.value = e.pageY
      }

      onMounted(() => {
        window.addEventListener('mousemove', update)
      })

      onUnmounted(() => {
        window.removeEventListener('mousemove', update)
      })

      return {x, y}
    }
  }
}


</script>
